<template>
  <div>
    <sui-container style="padding: 50px">
      <h2 is='sui-header'>
        Button
        <a href="http://localhost:8080/" is="sui-button" style="float: right ">主页</a>
      </h2>
      <sui-divider/>
      <sui-button>click here</sui-button>
      <div is='sui-button-group'>
        <sui-button>Cancel</sui-button>
        <sui-button-or />
        <sui-button positive>Save</sui-button>
      </div>
      <sui-button size='large'>按钮</sui-button>
      <sui-button size='massive'>按钮</sui-button>
      <sui-button size='big'>按钮</sui-button>
      <sui-divider/>
      <sui-button fluid content='按钮'/>
      <sui-divider/>
      <sui-button primary>按钮</sui-button>
      <sui-button secondary>按钮</sui-button>
      <sui-button positive>按钮</sui-button>
      <sui-button negative>按钮</sui-button>
      <sui-divider/>
      <sui-button animated>
        <sui-button-content visible>下一个</sui-button-content>
        <sui-button-content hidden>
          <sui-icon name='right arrow'/>
        </sui-button-content>
      </sui-button>
      <sui-button animated='vertical'>
        <sui-button-content visible>上一个</sui-button-content>
        <sui-button-content hidden>
          <sui-icon name='up arrow'/>
        </sui-button-content>
      </sui-button>
      <sui-button animated='fade'>
        <sui-button-content visible>渐变</sui-button-content>
        <sui-button-content hidden>
          好看啊
        </sui-button-content>
      </sui-button>
      <sui-divider/>
      <sui-button icon='cloud'/>
      <sui-button circular icon='settings'/>
      <sui-button compact icon='pause' label-position='left' content='暂停'></sui-button>
      <sui-button compact icon='pause' label-position='right' content='暂停'></sui-button>
      <sui-divider/>
      <sui-button basic content='关注'/>
      <sui-button basic color='red' content='红'/>
      <sui-button basic color='red' inverted content='红'/>
      <sui-button color='red' content='红'/>
      <div is='sui-segment' inverted>
        <sui-button basic color='red' inverted content='红'/>
        <sui-button basic color='red' content='红'/>
      </div>
      <sui-divider/>
      <sui-button-group>
        <sui-button>一</sui-button>
        <sui-button>二</sui-button>
        <sui-button>三</sui-button>
      </sui-button-group>
      <sui-divider/>
      <sui-button-group basic>
        <sui-button>一</sui-button>
        <sui-button>二</sui-button>
        <sui-button>三</sui-button>
      </sui-button-group>
      <sui-divider/>
      <sui-button-group basic :widths='3'>
        <sui-button>一</sui-button>
        <sui-button>二</sui-button>
        <sui-button>三</sui-button>
      </sui-button-group>
      <sui-divider/>
      <sui-button-group vertical :widths='3'>
        <sui-button>一</sui-button>
        <sui-button>二</sui-button>
        <sui-button>三</sui-button>
      </sui-button-group>
      <sui-divider/>
      <sui-button-group color='green' :widths='3'>
        <sui-button>一</sui-button>
        <sui-button>二</sui-button>
        <sui-button>三</sui-button>
      </sui-button-group>
      <sui-divider/>
      <sui-button-group size='large' :widths='3'>
        <sui-button>一</sui-button>
        <sui-button>二</sui-button>
        <sui-button>三</sui-button>
      </sui-button-group>
      <sui-divider/>
      <sui-button-group vertical>
        <sui-button compact icon='pause' label-position='left'>暂停</sui-button>
        <sui-button compact icon='play' label-position='left'>播放</sui-button>
        <sui-button compact icon='shuffle' label-position='left'>随机</sui-button>
      </sui-button-group>
      <sui-divider/>
      <sui-button active>激活</sui-button>
      <sui-button disabled>禁止</sui-button>
      <sui-button loading primary>loadding</sui-button>
    </sui-container>
  </div>
</template>

<script>

</script>

<style scoped>

</style>

// semantic提供了一些默认的主题 Default Classic Basic Bootstrap3
// Twitter Raised Chubby  Round Amazon Material Github
